<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        html{
            background:#f7f7f7;
        }
        .banner{
            z-index: -1;
            position: fixed;
            width: 100%;
            height: 100px;
            left: 0;
            top: 0;
            background-color: #2aae67;
            border-radius: 0 0 50% 50%;
        }
        .image-grid {
            margin-top: 68px;
            display: flex;
            flex-wrap: wrap;
            padding: 5px;
            background: #fff;
            border-radius: 8px;
        }

        .image-wrapper {
            position: relative;
            width: 30.33%;
            padding: 5px;
        }

        .image-wrapper .el-image {
            display: block;
            width: 100%;
            height: 110px;
            overflow: hidden;
            cursor: pointer;
            border:1px solid #eee;
        }

        .delete-badge {
            position: absolute;
            top: 5px;
            right: 5px;
            background: #eee;
            color: #f56c6c;
            font-size: 12px;
            padding: 5px;
            cursor: pointer;
        }
        .el-image-viewer__mask{
            opacity: 0.9 !important;
        }
        .upload-wrap{
            text-align: center;
            color: #fff;
        }
        .upload-wrap .el-upload__tip{
            color:#fff;
        }
        .del-button{
            z-index: 100;
            position: fixed;
            bottom: 10px;
            left: 10px;
        }
    </style>
</head>


<body>
    <div id="app">
        <div class="banner">
        </div>
        <el-button class="del-button" size="small" type="danger" round @click="handleClearAll">全部清空</el-button>
        <el-upload class="upload-wrap" action="/upload" :file-list="uploadFiles" :show-file-list="false" multiple
            :on-change="handleOnChange">
            <el-button slot="trigger" size="small" plain round style="color:#2aae67">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <div class="image-grid">
            <span v-show="fileList.length == 0" style="font-size: 14px;">
                暂无数据
            </span>
            <div v-for="(file, index) in fileList" :key="index" class="image-wrapper">
                <el-image
                :preview-src-list="[file.url]"
                :src="file.url"
                fit="fit"></el-image>
                <span class="delete-badge el-icon-close" @click="handleRemove(file.name)"></span>
            </div>
        </div>
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            fileList: [],
            uploadFiles: [],
        },
        created() {
            this.getList();
        },
        methods: {
            getList() {
                axios.get('/files/list').then(res => {
                    this.fileList = res.data
                })
            },
            submitUpload() {
                let data = new FormData();
                data.append('file', this.uploadFiles[0]);
                console.log(data)
                axios.post('/', data, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                    onUploadProgress: function (progressEvent) {
                        console.log('上传进度：' + progressEvent.loaded / progressEvent.total);
                    }
                }).then(res => {
                    if (res.data.code == 200) {
                        this.$message.success(res.data.data.msg)

                    }
                })
                // axios.post('/cloudFiles', {
                //     name:
                // }, {
                // }).then(function (res) {
                //     console.log(res);
                // });
            },
            handleOnChange() {
                this.$nextTick(() => {
                    this.getList()
                })
            },
            handleRemove(name) {
                axios.get(`/files/del?name=${name.replace(/\s/g, '')}`).then(res => {
                    location.reload()
                })
            },
            handleClearAll(){
                axios.get('/files/cls').then(res => {
                    location.reload()
                })
            }
        }
    })
</script>

</html>